<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            width: 100%;
            font-family: fantasy;
            font-size: 13px;
        }

        h1 {
            text-align: center;
        }

        #myDiv {
            margin-top: 50px;
            width: 100%;
            text-align: center;
        }

        table {
            margin-left: auto;
            margin-right: auto;
        }

    </style>
    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.0.min.js"></script>
    <script src="/js/jquery.cookie.js"></script>
</head>
<body>
<script type="text/javascript">
    var pushAll = false;
    function change() {
        var radio = document.getElementsByName("type");
        var radioLength = radio.length;
        for (var i = 0; i < radioLength; i++) {
            if (radio[i].checked) {
                var radioValue = radio[i].value;

                if (radioValue == "yes") {
                    pushAll = true;
                    $("#pushIdDiv").hide();
                    $("#pushUidDiv").hide();
                }
                else if (radioValue == "no") {
                    pushAll = false;
                    $("#pushIdDiv").show();
                    $("#pushUidDiv").show();
                }
            }
        }
    }
    window.onload = function () {
        change();
    }
</script>

<h1>Notification Api Test</h1>

<div id="myDiv">
    <table cellspacing="10" cellpadding="0" width="400">
        <tr align=left>
            <td width="100" align=right>title :&nbsp&nbsp&nbsp</td>
            <td width="300" colspan="3"><input id="title" name="id" type="text" value="test title"></td>
        </tr>

        <tr align=left>
            <td width="100" align=right>message:&nbsp&nbsp&nbsp</td>
            <td width="300" colspan="3"><textarea id="content" name="content" cols="40" rows="4"
            >test content</textarea></td>
        </tr>

        <tr align=left>
            <td width="100" align=right>payload:&nbsp&nbsp&nbsp</td>
            <td width="300" colspan="3"><textarea id="payload" name="content" cols="40" rows="4"
            >{"abc":123}</textarea></td>
        </tr>

        <tr align=left>
            <td width="100" align=right><font size="2">pushAll</font>
            </td>

            <td width="100" align="right"><input name="type" type="radio" value="yes" onchange="change();"/>是
            </td>

            <td width="100" align="right"><input name="type" type="radio" value="no" checked=true onchange="change();"/>否
            </td>

        </tr>

        <tr align=left id="pushIdDiv">
            <div id="pushIdText">
                <td width="100" align=right>pushId: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><textarea id="pushId" name="pushId" cols="40" rows="4"
                                                      placeholder="多个Id换行分开" value=""></textarea></td>
            </div>
        </tr>
        <tr align=left id="pushUidDiv">
            <div id="pushUidText">
                <td width="100" align=right>uid: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><textarea id="uid" name="uid" cols="40" rows="4"
                                                      placeholder="多个Id换行分开" value=""></textarea></td>
            </div>
        </tr>

        <tr align=left id="ttlDiv">
            <div id="timeToLiveDiv">
                <td width="100" align=right>timeToLive: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><input id="timeToLive" name="timeToLive" value=""></input></td>
            </div>
        </tr>

        <tr align=left style="display:none;">
            <td width="400"><input id="notification" name="notification" type="hidden"></td>
        </tr>

        <tr align=left style="display:none;">
            <td width="400"><input id="pushAll" name="pushAll" type="hidden"></td>
        </tr>

        <tr align=right>
            <td width="400" colspan=4 align="center"><input type="button" onclick="ajaxTest()" value="推送"/></td>
        </tr>
        <tr></tr>
        <tr>
            <td width="400" colspan="4" align="center"><font size="5" color="green" id="result"></font></td>
        </tr>

    </table>

    <br/>
    <a id="url"></a>

</div>
<script>

    function cleanArray(array, deleteValue) {
        for (var i = 0; i < array.length; i++) {
            if (array[i] == deleteValue) {
                array.splice(i, 1);
                i--;
            }
        }
        return array;
    }

    function ajaxTest() {
        var radio = document.getElementsByName("type");
        for (var i = 0; i < radio.length; i++) {
            if (radio[i].checked) {
                var radioValue = radio[i].value;
                if (radioValue == "no" && $("#pushId").val() == "" && $("#uid").val() == "") {
                    alert("pushId和uid不能都为空");
                    return false;
                }
            }
        }
        var title = $("#title").val();
        if (title == "") {
            alert("title 不能为空");
            return false;
        }
//        var content = $("#content").val();
//        if (content == "") {
//            alert("content 不能为空");
//            return false
//        }

        var data = {
            "android": {"title": $("#title").val(), "message": $("#content").val()},
            "apn": {"alert": $("#content").val()},
            "payload": JSON.parse($("#payload").val())
        }
        var str = JSON.stringify(data);

        var pushIds = ($("#pushId").val()).split("\n");
        pushIds = cleanArray(pushIds, "");

        var uids = ($("#uid").val()).split("\n");
        uids = cleanArray(uids, "");
        $.ajax({
            type: 'GET',
            url: "https://" + window.location.hostname + ":" + $.cookie("api_port") + "/api/notification",
            data: {
                pushId: pushIds,
                notification: str,
                pushAll: pushAll,
                uid: uids,
                timeToLive: $("#timeToLive").val()
            },
            success: function (data) {
                document.getElementById("result").innerHTML = JSON.stringify(data);
                $('#url').attr('href', this.url);
                $("#url").text(this.url);
            },
            error: function (data) {
                document.getElementById("result").innerHTML = JSON.stringify(data);
                $('#url').attr('href', this.url);
                $("#url").text(this.url);
            }
        });
    }

    $("#pushId").bind('input propertychange', function () {
        $("#uid").val("");
    });

    $("#uid").bind('input propertychange', function () {
        $("#pushId").val("");
    });

</script>

</body>
</html>